<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <title>金材2101目标1</title>
</head>

<body>
    <div id="main" style="width: 80%;height:400px;"></div>
    <script type="text/javascript">
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        const markLineOpt = {
            animation: false,
            label: {
                formatter: '0.15',
                align: 'right'
            },
            data: [
                [
                    {
                        coord: [0, 0.15],
                        symbol: 'none'
                    },
                    {
                        coord: [23, 0.15],
                        symbol: 'none'
                    }
                ]
            ]
        };
        const markLineOpt2 = {
            animation: false,
            label: {
                formatter: '0.13',
                align: 'right'
            },
            data: [
                [
                    {
                        coord: [0, 0.13],
                        symbol: 'none'
                    },
                    {
                        coord: [23, 0.13],
                        symbol: 'none'
                    }
                ]
            ]
        };
        option = {
            xAxis: {
                splitLine: { show: false },
                name: '学生',
                data: ['刘兴迪', '陈欣欣', '王梓芊', '高微', '王廷玺', '李甲原', '王培嘉', '赵树尧', '石羽', '李睿', '郭树丰', '韩庭轩', '丁子垚', '张健有', '鲍金洋', '孙鉴龙', '陈家乐', '汪文熠', '周世琳', '康睿芃', '黄天奇', '唐大力', '王昕辉', '']
            },
            yAxis: {
                splitLine: { show: false },
                axisLine: {
                    show: true // 显示 Y 轴线
                },
                name: '达成度'
            },
            series: [
                {
                    symbolSize: 12,
                    markLine: markLineOpt,
                    data: [0.16, 0.155555556, 0.135555556, 0.166666667, 0.162222222, 0.146666667, 0.16, 0.137777778, 0.153333333, 0.157777778, 0.124, 0.128888889, 0.155555556, 0.117777778, 0.146666667, 0.12, 0.157777778, 0.14, 0.079111111, 0.171111111, 0.148888889, 0.144444444, 0.155555556],
                    type: 'scatter'
                },
                {
                    markLine: markLineOpt2,
                    type: 'scatter'
                }
            ]
        };

        option && myChart.setOption(option);

    </script>
</body>

</html>